<!--
 * @Author: ujjldn ujjldn0515@163.com
 * @Date: 2025-07-14 18:55:27
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-07-15 19:13:37
 * @FilePath: \g-messagebox\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-button @click="showDialog">显示 MessageBox</el-button>
    <el-button @click="showDialog1">显示 MessageBox</el-button>
    <el-button @click="showDialog3">显示 MessageBox</el-button>
  </div>
</template>

<script setup>
import { gShowMessageBox } from '@/utils/useSelectDialog'

const showDialog = () => {
  gShowMessageBox({
    countdown: true,
    autoResolveButton: 'confirm',
    duration: 5,
    title: '保存提醒',
    message: '您有 %s 秒时间确认保存',
    confirmButtonText: '保存',
    cancelButtonText: '取消',
    onConfirm: () => {
      console.log('用户点击了确认')
    },
    onCancel: () => {
      console.log('用户点击了取消')
    },
  })
}
const showDialog1 = () => {
  gShowMessageBox({
    countdown: true,
    type: 'success',
    autoResolveButton: 'cancel',
    duration: 5,
    title: '保存提示',
    message: '保存成功',
    showConfirmButton: false,
    cancelButtonText: '取消',
    onCancel: () => {
      console.log('用户点击了取消')
    },
  })
}

const showDialog3 = () => {
  gShowMessageBox({
    countdown: true,
    autoResolveButton: 'cancel',
    duration: 5,
    title: '保存提醒',
    message: '您有 %s 秒时间确认保存',
    confirmButtonText: '保存',
    cancelButtonText: '取消',
    onConfirm: () => {
      console.log('用户点击了确认')
    },
    onCancel: () => {
      console.log('用户点击了取消')
    },
  })
}
</script>